<template>
    <Uploader @confirm="openUploader" proholder="测井信息上传"></Uploader>
    <a-timeline>
        <view v-for="(item, index) in surveyList">

            <a-timeline-item color="green">

                <a-collapse v-model:activeKey="activeKey" :bordered="false">
                    <a-collapse-panel :key="item.id" :header="`${item.remark}  测井记录 ${item.createdTime}`">
                        <AntdZh>
                            <a-popconfirm title="是否删除该测井记录" @confirm="handleDelete(item.id)">
                                <a-button danger>删除</a-button>
                            </a-popconfirm>
                        </AntdZh>
                        <SurveyData :value="item.id" />
                    </a-collapse-panel>
                </a-collapse>
            </a-timeline-item>
        </view>
    </a-timeline>
    <AntdConfirmModal title="上传" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
        <a-form ref="formRef" :model="form" :label-col="{ span: 4 }">
            <a-row>
                <a-col :span="18" push="2">
                    <a-form-item label="上传附件">
                        <a-upload-dragger withCredentials v-model:fileList="fileList" style="width: 350px;" name="file"
                            :disabled="fileList.length > 0" :before-upload="beforeUpload" @remove="handleRemove">
                            <p class="ant-upload-drag-icon">
                                <inbox-outlined></inbox-outlined>
                            </p>
                            <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                        </a-upload-dragger>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="18" push="2">
                    <a-form-item label="备注" name="remark">
                        <a-textarea v-model:value="form.remark" style="width: 350px;" placeholder="请输入备注信息" :rows="4" />
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
    </AntdConfirmModal>
</template>
<script setup>
import Uploader from '@/custom/well/components/Uploader'
import request from '@/utils/request'
// 测井数据
import SurveyData from './data'
import { queryList, uploadFile, deleteOne } from '@/api/survey/survey.js'
import { InboxOutlined } from '@ant-design/icons-vue'
import useApp from "@/hooks";
import { watch } from 'vue'
const { $, proxy } = useApp();
const modalRef = ref(null)
const activeKey = ref(null)
const formRef = ref(null)
// 定义文件列表
const fileList = ref([])
const props = defineProps({
    data: {
        type: Object
    }
})
// 监听
watch(() => props.data, (newVal, oldVal) => {
    getList()
})
const form = ref({
    file: null,
    remark: ''
})
const surveyList = ref([])
const queryParams = ref({
    pageNum: 1,
    pageSize: 100,
    wellId: undefined
})

// 删除
function handleDelete(id) {
    deleteOne(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}

function openUploader() {
    modalRef.value.openModal()
}
// 移除文件
const handleRemove = file => {
    const index = form.value.file.indexOf(file);
    const newfile = form.value.file.slice();
    newfile.splice(index, 1);
    form.value.file = newfile;
};


const beforeUpload = file => {
    // 记录文件
    form.value.file = file
    // 直接停止上传
    return false;
};

function getList() {
    queryParams.value.wellId = props.data.wellId
    // 补全参数
    // if(Validator.isNotEmpty(props.data)){
    //     queryParams.value.wellId = props.data.wellId
    // }
    queryList(queryParams.value).then(res => {
        console.log('survey', res);
        surveyList.value = res.content;
    })
}
// 提交
function submitForm() {
    const formData = new FormData();
    formData.append('file', form.value.file);
    formData.append('wellId', props.data.wellId)
    formData.append('remark', form.value.remark)
    request.post('/well/survey/import', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(res => {
        // console.log(res)
        $.showToast({
            title: '上传成功',
            icon: 'success'
        })
        getList()
        modalRef.value.closeModal()
    })

}
/* const submitForm = () => {
    //   const formData = new FormData();
    //   form.value.file.forEach(file => {
    //     formData.append('files[]', file);
    //   });

    console.log(form.value)
    uploadFile(form.value).then(() => {
        // file = [];
        message.success('上传成功');
    }).catch(() => {
        message.error('上传失败');
    });
}; */

getList()
</script>